{% extends "base.html" %}

{% block title %}Databinding Example{% endblock %}
{% block header_text %}Databinding Example{% endblock %}

{% block content %}

    <div id="values">
        {% for integer_value in integer_values %}
            <p data-value-id='{{ integer_value.pk }}'>
                <label>{{ integer_value.name }}</label>
                <input type='range' value='{{ integer_value.value }}' min='0' max='100'>
                <output>{{ integer_value.value }}</output>
            </p>
        {% empty %}
            <p class="empty">No values yet.</p>
        {% endfor %}
    </div>

{% endblock %}

{% block extra_body %}
    <script>
        $(function () {
            var ws_path =  "/stream/xujl/";
            console.log("Connecting to " + ws_path);
            var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
            var valSocket = new ReconnectingWebSocket(ws_scheme+'://'+window.location.host+ws_path);
            webSocketBridge.connect(ws_path);
            webSocketBridge.listen();
            webSocketBridge.demultiplex('intval', function(payload, streamName) {
                // Handle different actions
                if (payload.action == "create") {
                    // Create the new integer value
                    var content = "<p data-value-id='" + payload.pk + "'><label>" + payload.data.name + "</label> <input type='range' value='" + payload.data.value + "' min='0' max='100'><output>" + payload.data.value + "</output>";
                    $("#values").append(content);
                    // Remove empty message
                    $("#values .empty").remove();
                } else if (payload.action == "update") {
                    $("p[data-value-id=" + payload.pk + "] label").text(payload.data.name);
                    $("p[data-value-id=" + payload.pk + "] input").val(payload.data.value);
                    $("p[data-value-id=" + payload.pk + "] output").val(payload.data.value);
                } else if (payload.action == "delete") {
                    $("p[data-value-id=" + payload.pk + "]").remove();
                } else {
                    console.log("Unknown action " + payload.action);
                }
            });

            // Bind changing the slider value
            $("#values").on("change", "input", function () {
                $(this).parent().find("output").val($(this).val());
                webSocketBridge.stream('intval').send({
                    "pk": $(this).parent().attr("data-value-id"),
                    "action": "update",
                    "data": {
                        "value": $(this).val(),
                    }
                });
            });

            // Helpful debugging
            webSocketBridge.socket.addEventListener('open', function() { console.log("Connected to notification socket"); });
            webSocketBridge.socket.addEventListener('close', function() { console.log("Disconnected to notification socket"); });
            webSocketBridge.socket.addEventListener("beforeunload", function (event) { primus.end(); });
        });
    </script>
{% endblock %}
{#{% block extra_body %}#}
{#    <script>#}
{#        $(function () {#}
{#            var ws_path =  "/stream/xujl/";#}
{#            console.log("Connecting to " + ws_path);#}
{##}
{#            var webSocketBridge = new channels.WebSocketBridge();#}
{#            webSocketBridge.connect(ws_path);#}
{#            webSocketBridge.listen();#}
{#            webSocketBridge.demultiplex('intval', function(payload, streamName) {#}
{#                // Handle different actions#}
{#                if (payload.action == "create") {#}
{#                    // Create the new integer value#}
{#                    var content = "<p data-value-id='" + payload.pk + "'><label>" + payload.data.name + "</label> <input type='range' value='" + payload.data.value + "' min='0' max='100'><output>" + payload.data.value + "</output>";#}
{#                    $("#values").append(content);#}
{#                    // Remove empty message#}
{#                    $("#values .empty").remove();#}
{#                } else if (payload.action == "update") {#}
{#                    $("p[data-value-id=" + payload.pk + "] label").text(payload.data.name);#}
{#                    $("p[data-value-id=" + payload.pk + "] input").val(payload.data.value);#}
{#                    $("p[data-value-id=" + payload.pk + "] output").val(payload.data.value);#}
{#                } else if (payload.action == "delete") {#}
{#                    $("p[data-value-id=" + payload.pk + "]").remove();#}
{#                } else {#}
{#                    console.log("Unknown action " + payload.action);#}
{#                }#}
{#            });#}
{##}
{#            // Bind changing the slider value#}
{#            $("#values").on("change", "input", function () {#}
{#                $(this).parent().find("output").val($(this).val());#}
{#                webSocketBridge.stream('intval').send({#}
{#                    "pk": $(this).parent().attr("data-value-id"),#}
{#                    "action": "update",#}
{#                    "data": {#}
{#                        "value": $(this).val(),#}
{#                    }#}
{#                });#}
{#            });#}
{##}
{#            // Helpful debugging#}
{#            webSocketBridge.socket.addEventListener('open', function() { console.log("Connected to notification socket"); });#}
{#            webSocketBridge.socket.addEventListener('close', function() { console.log("Disconnected to notification socket"); });#}
{#            webSocketBridge.socket.addEventListener("beforeunload", function (event) { primus.end(); });#}
{#        });#}
{#    </script>#}
{#{% endblock %}#}
